/*
	Script: navbar.js
		Creates a generic navbar control
	
	Copyright:
		Copyright (c) 2010 Anthony Do.
	
	License:
		MIT-style license.
 */

MUI.files[MUI.path.plugins + 'mochaNavBar/navbar.js'] = 'loaded';

MUI.NavBar = new Class({
	
	Implements: [Events, Options],
	
	options: {
	     id:            'desktopNavbar'              // id of the primary element, and id os control that is registered with mocha
	    ,container:     null            // the parent control in the document to add the control to
	    ,createOnInit:  true            // true to add tree to container when control is initialized

	    ,nodes:         $A([])          // the hierarchical list of nodes

	    ,textField:     'text'          // the name of the field that has the node's text
	    ,valueField:    'value'         // the name of the field that has the node's value
	    ,titleField:    'title'         // the name of the field that has the node's tip text
	    
	    ,enableSpinner: true       		// true to show spinner
	    ,enableThemeSelector: true 		// true to show theme selector
	    ,canSelect:     true            // can the user select a node by clicking it
	    ,value:         ''              // the currently selected node's value
	    ,selectedNode:  null            // the currently selected node

	    ,onNodeSelected:$empty          // event: when a node is clicked
	},
	
	initialize: function( options )
	{
	    this.setOptions(options);

	    // make sure this controls has an ID
	    var id=this.options.id;
	    if(!id) { 
	    	id='desktopNavbar'; 
	    	this.options.id=id; 
	    }

	    // create sub items if available
	    if(this.options.createOnInit && this.options.nodes.length>0) this.toDOM();

	    MUI.set(id,this);    
	},
	
	toDOM: function(containerEl)
	{
	    var self=this;        
	    var o=self.options;

	    var isNew = false;
	    var div=$(o.id);
	    var ul;
	    if(!div) { 
	        div=new Element('div');
	        div.id=o.id;
	        isNew=true;
	    } else {
	    	ul=div.getElement('ul');
	    }
	    
	    if(!ul) {
	        ul=new Element('ul').inject(div);
	    } else {
	    	ul.empty();
	    }
	    self.element = div;   
	    
	    var nodes=o.nodes;
	    nodes.each(function(node) {
	    	var li=new Element('li').inject(ul);
	    	var value=self._getData(node,o.valueField);
		    var text=self._getData(node,o.textField);
		    a = new Element('a',{
		    		'href':'#' + value,
		    		'class': 'returnFalse'
		    	}).inject(li);
		    span = new Element('span',{'text':text}).inject(a);
	    	var subnodes = node.nodes;
	    	if (subnodes && subnodes.length > 0){
	    		var subul=new Element('ul').inject(li);
	    		subnodes.each(function(node) {
		    		self.buildNode(node,subul);
		    	});
	    	}
	    	
	    });
	      

	    if(!isNew) return this;

	    window.addEvent('domready', function() {
	        var container=$(containerEl ? containerEl : o.container);
	        container.appendChild(div);
	    });

	    return div;
	},
	
	buildNode: function(node, parent) {
	    var self = this;
	    var o=this.options;

	    var a, span, t, ul, li;
	    if(node._element!=null) {li=node._element;}
	    if(!li) li = new Element('li');
	    else li.empty();

	    if(parent) {
	        if(parent._ul) li.inject(parent._ul);
	        else li.inject(parent); 
	    }

	    var value=self._getData(node,o.valueField);
	    var text=self._getData(node,o.textField);
	    a = new Element('a',{
	    		'href':''+ value
	    	}).inject(li);
	    span = new Element('span',{'text':text}).inject(a);

	    node._element = li;
	    var title=self._getData(node,o.titleField);
	    if (title) a.title = title;

	    if (node.nodes && node.nodes.length > 0) {
	    	a.addClass('returnFalse arrow-right');
	        if (!ul) {
	        	ul = new Element('ul').inject(li);
	        }
	        node._ul =ul;
	        
	        for (var i = 0; i < node.nodes.length; i++) {
	            self.buildNode(node.nodes[i],node,ul);
	        }
	    } else {
//	    	li.addClass('nochild');
	    }

	    // set events
//	    a.removeEvents('click');
//	    a.addEvent('click', function(e) { self.onNodeClick(node,e); });

	    return self;
	},
	
	_getData: function(item,property){
	    if(!item || !property) return '';
	    if(item[property]==null) return '';
	    return item[property];
	},
	
	onNodeClick: function(node,e) {
	    var self = this;
	    var o=self.options;
	    e=new Event(e).stop();
	    self.selectValue(self._getData(node,o.valueField),e);
	},
	
	selectValue: function(val,e,suppressEvent)
	{
	    var self=this;
	    var o=self.options;    
	    var node=self.nodeFind(val);
	    if(!node) return;
	    
	    if(node._element) {
	        if(o.selectedNode && o.selectedNode._element) {
//	        	o.selectedNode._element.getElement('a').removeClass('sel');
	        }
	        o.selectedNode = node;
//	        node._element.getElement('a').addClass('sel');
	    }
	    o.value = val;
	    if(!suppressEvent) this.fireEvent('nodeSelected',[node,self,e]);
	},
	
	nodeFind: function(val,node) {
	    var self=this;
	    var o=self.options;
	    if (node!=null) {
	        var value=self._getData(node,o.valueField);
	        if(value && value + '' == val + '') { return node; }
	    } else node=self;
	    var nodes;
	    if(node.options) nodes=node.options.nodes;
	    if(nodes==null) nodes=node.nodes;
	    if (nodes) {
	        var l = nodes.length;
	        for (var i = 0; i < l; i++) {
	            var snode = this.nodeFind(val,nodes[i]);
	            if (snode) return snode;
	        }
	    }
	    return null;
	}
	
});